<template>
    <div class="hotsear"> 
        <div>
            <img src="../../static/images/8im4k3yb42zzkk20oc7c8o7jt2ugtptx.png" />
            <span>热门搜索</span>
        </div>
        <div>
            <router-link to="" v-for="(val,index) in items" :key="index" >{{val.words}}</router-link>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
        },
    }
</script>
<style scoped>
    .hotsear{
        width: 100%;
        height: 100vh;
        background: #fff;
        font-size: .6rem;
        position: fixed;
        z-index: 2000;
    }
    .hotsear p{
        color: #666;
        text-indent: 1rem;       
    }
    .hotsear div {
        padding: 0 .5rem;
        display: flex;
        color: #666;
    }
    .hotsear div:first-child{
        margin: 1rem 0 0 0;
    }
    .hotsear div:last-child{
        display: flex;
        flex-flow: wrap row;
        padding : .4rem 1rem ;
    }
    img{
        width: .5rem;
        height: .6rem;
        margin: 0 .3rem 0 0;
    }
    .hotsear div a{
        background: #eee;
        color: #f36;
        font-size: .4rem;
        display: inline-block;
        margin: .3rem .2rem; 
        padding: 0 .4rem;
        border-radius: .5rem;
    }
    .hotsear div a:nth-child(2),.hotsear div a:nth-child(4),.hotsear div a:nth-child(7){
        color: #666;
    }
</style>